<template>
  <div>
    <!-- 单一根，指令才能生效，必须 v-modaldrag --->
    <el-form :model="employee" ref="employeeForm" :rules="rules" :label-width="100" size="medium">
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="姓名" prop="name"><el-input v-model="employee.name"  :style="{width:elWidth1}"/></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="证件类型" prop="idCardType"><el-input v-model="employee.idCardType"  :style="{width:elWidth1}"/></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idCardNumber"><el-input v-model="employee.idCardNumber"  :style="{width:elWidth1}"/></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="性别" prop="sex"><el-select v-model="employee.sex" :clearable="true" :style="{width:elWidth1}"><el-option v-for="item in sexItems" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday"><dayu-date-picker v-model="employee.birthday" :style="{width:elWidth1}" /></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="籍贯" prop="birthplace"><el-input v-model="employee.birthplace"  :style="{width:elWidth1}"/></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="电话" prop="mobile"><el-input v-model="employee.mobile"  :style="{width:elWidth1}"/></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email"><el-input v-model="employee.email"  :style="{width:elWidth1}"/></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="岗位" prop="jobTitle"><el-input v-model="employee.jobTitle"  :style="{width:elWidth1}"/></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="学历" prop="education"><el-input v-model="employee.education"  :style="{width:elWidth1}"/></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="毕业学校" prop="school"><el-input v-model="employee.school"  :style="{width:elWidth1}"/></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="专业" prop="speciality"><el-input v-model="employee.speciality"  :style="{width:elWidth1}"/></el-form-item></el-col>

      </el-row>
      <el-row :gutter="formGutter">
  
        <el-col :span="12">
          <el-form-item label="备注" prop="remarks"><el-input type="textarea" v-model="employee.remarks" :rows="3" /></el-form-item></el-col>

  
        <el-col :span="12">
          <el-form-item label="顺序号" prop="ordnum"><dayu-integer-input v-model="employee.ordnum" :style="{width:elWidth1}"  > </dayu-integer-input></el-form-item></el-col>

      </el-row>
    </el-form>


  </div>
</template>

<script lang="ts" setup>
/*
 * @author: user
 * @date: 2021-11-24 14:49:54
 * @template: dayu-code-builder
*/
import { ref, reactive, computed, onMounted } from 'vue'
import { Employee, employeeService } from '@/api/demo/EmployeeService'
import { IForm, formColGutter } from '@/common/FormModal'
import { myutil, EntityBO } from '@/common/dayu-common'

const props = defineProps({
  id: Number,
  departmentId: Number,
  departmentName: String,
});

/** form两列之间的间距 */
const formGutter = formColGutter;
const elWidth1 = '270px';
/** 接口数据（和接口返回数据对应） */
const employeeData = reactive({employee:<Employee>{}, codeTypes:{}, nameTypes:{}});
/** 表单数据 */
const employee = computed(() => employeeData.employee);

/** 下拉列表数据 */
const sexItems = computed(() => myutil.codeItems2ElOptions(employeeData.codeTypes["sex"]));

/** 表单验证 */
const rules = {
  name: [{ required: true, message: '姓名是必填项', trigger: 'blur' }],
}
/** 用于记录Form表单的原始数据。在提交数据时进行对比，如果没有发生变化，则不执行实际的提交。 */
let originFormData = '';

/** 表单vue组件对象 */
const employeeForm = ref();

/** 获取表单数据 */
async function getFormData() {
  try {
    let response: any = await employeeService.getEmployeeBO(props.id as number);
    let employeeBO = response.data as EntityBO;
    employeeData.employee = employeeBO.data || {};
    employeeData.codeTypes = employeeBO.codeTypes;
    employeeData.nameTypes = employeeBO.nameTypes;
  } catch (ex: any) {
    console.error("await error");
    console.error(ex);
  }
}

/** 提交表单数据（这个函数是给引用表单的组件调用的，函数名是固定的，不能修改） */
async function submitFormData() {//函数名固定为submitFormData，FormModal.submit内会按此函数名执行调用
  if(props.departmentId){
    employeeData.employee.deptId = props.departmentId;
  }

  let newFormData = JSON.stringify(employeeData.employee);

  //和表单原始数据时进行对比，如果没有发生变化，则不执行实际的提交。
  if (originFormData === newFormData) {
    console.log("数据没有改动，无需保存，操作已取消");
    return Promise.resolve();
  }
  try {
    await employeeForm.value.validate(); //表单验证
  } catch {
    return Promise.reject('validateError');//表单验证出错
  }
  try {
    let response = await employeeService.saveEmployee(employeeData.employee); //提交数据到后端服务进行保存
    return Promise.resolve(response);
  } catch (err: any) {
    return Promise.reject(err);//表单验证出错
  }
}

onMounted(() => {
  getFormData();
});

defineExpose({ submitFormData } as IForm);

</script>

<style scoped>
</style>